<template>
	<view>
		<view class="banner posRel">
			<image class="samePar" mode="widthFix" src="https://hxy2022-1309823386.cos.ap-beijing.myqcloud.com/zongzhi/banner.png"></image>
			<view class="selMyCity posAbso" @tap="selHome" v-if="globalCityList.length > 0">
				<text class="iconfont icon-qiehuanyonghu" v-if="!singleFlag"></text>
				<text>{{cityHome.village}}</text>
			</view>
		</view>
		<index-mod :hasNewsFlag="hasNewsFlag" :newsList="newsList" @goNewsList="goNewsList"></index-mod>
		<!-- modTit -->
		<template v-if="hasGridWorkerFlag">
			<view class="modTit spaceBet">
				<view class="tit">
					<view>网格员</view>
					<view class="decLine"></view>
				</view>
			</view>
			<view class="gridWorker padd clearfix">
				<view class="workerList"
					v-for="(item,index) in workerList"
					:key="index"
					@tap="goGridWorkerDet(item.workerId)"
				>
					<view class="innerWorker">
						<view class="workerHead">
							<image class="samePar" src="../../static/images/index/gridHead.png" v-if="item.zjImg == ''"></image>
							<image class="samePar" :src="getCloudFilePath(item.zjImg)" v-else></image>
						</view>
						<view class="workerName">{{item.userName}}</view>
						<view class="workerSex">性别：{{item.sex}}</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="hasZxsFlag">
			<view class="modTit spaceBet">
				<view class="tit">
					<view>网格咨询师</view>
					<view class="decLine"></view>
				</view>
			</view>
			<view class="recommend">
				<view class="recList" v-for="(item,index) in zxsList" :key="index" @tap="goZxsArchive(item.workerId)">
					<view class="comLinearBg samePar posAbso ltzero"></view>
					<view class="samePar posAbso ltzero conView hasFlex">
						<view class="head flexAll">
							<view class="innerHead">
								<image class="samePar" mode="aspectFill" :src="item.zjImg"></image>
							</view>
						</view>
						<view class="userCon">
							<view class="userName">{{item.userName}}</view>
							<view class="zxsLevel">{{formatZsName(item.zsName)}}</view>
						</view>
					</view>
					<view class="recTag posAbso">荐</view>
				</view>
			</view>
		</template>
		<template v-if="hasCpFlag">
			<view class="modTit spaceBet">
				<view class="tit">
					<view>测评活动</view>
					<view class="decLine"></view>
				</view>
				<view class="more" @tap="goMoreCpHd">更多</view>
			</view>
			<cp-list :cpList="cpList" @goDet="goCpDet"></cp-list>
		</template>
		<template v-if="hasGridWorkerFlag == false && hasZxsFlag == false && hasCpFlag == false">
			<no-data></no-data>
		</template>
		<uni-popup type="top" ref="selHomePop" :maskClick="false">
			<view class="selHomePop">
				<view class="selTit">请选择您想要登录的社区</view>
				<view class="homeCon hasFlex">
					<template></template>
					<view class="homeCityList">
						<scroll-view class="scrollView" scroll-y>
							<view class="cityName"
								:class="[cityIndex == index ? 'active' : '']"
								v-for="(item,index) in cityList"
								:key="index"
								@tap="goSelectCity(index,item)"
							>{{item}}</view>
						</scroll-view>
					</view>
					<view class="homeVillageList">
						<scroll-view class="scrollView" scroll-y>
							<template v-if="villageList.length > 0">
								<view class="villageName"
									:class="[villageIndex == index ? 'active' : '']"
									v-for="(item,index) in villageList"
									:key="index"
									@tap="selectCurrVillage(index,item)"
								>
									<text class="iconfont icon-shouye"></text>
									<text>{{item.village}}</text>
								</view>
							</template>
							<template v-else>
								<view class="noVillage">暂无社区</view>
							</template>
						</scroll-view>
					</view>
				</view>
				<view class="homeBot" @tap="goSelHome">{{clickTit}}</view>
			</view>
		</uni-popup>
		<image class="wjgyBtn" src="../../static/images/wjgyBtn.png" @tap="showWjgyTel" v-if="selCityName != ''"></image>
		<uni-popup type="center" ref="wjgyPop" :maskClick="false">
			<view class="wjgyPop">
				<image class="wjgyBg posAbso ltzero" src="../../static/images/wjgy.png" mode="widthFix"></image>
				<view class="wjgyCon posAbso ltzero">
					<view class="telIcon">
						<text class="iconfont icon-jinggao"></text>
					</view>
					<view class="telNum">{{wjgyTel}}</view>
					<view class="tips">24小时心理急求求助电话</view>
					<view class="notes">您正在拨打的电话是心理急救热线，您的通话会被全程录音请谨慎拨打！</view>
					<view class="dialBtn" @tap="goDialWjgy">心理急救</view>
				</view>
				<view class="iconfont icon-guanbi posAbso" @tap="closeWjgy"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import IndexMod from './components/IndexMod.vue'
	import CpList from './components/CpList.vue'
	import { getWjgyTel } from '@/api/xlzx/index'
	import { getZzNewsList } from '@/api/news/index'
	import { mapGetters } from 'vuex'
	import {
		getZzCenterZxsListIndex,
		getZzIndexSliceCpList,
		upToken
	} from '@/api/index/index'
	export default {
		components: {
			IndexMod,
			CpList
		},
		computed:{
			...mapGetters(['syLoadNum']),
			formatZsName(){
				return function(zsName){
					return zsName.split(',')[0]
				}
			}
		},
		data() { 
			return {
				hasNewsFlag:-1,
				newsList:[],
				hasGridWorkerFlag:null,
				hasZxsFlag: null,
				hasCpFlag: null,
				workerList:[],
				zxsList: [],
				cpList: [],
				globalCityList:[],
				cityList:[],
				cityIndex:0,
				selCityName:'',
				villageList:[],
				villageIndex:-1,
				singleFlag:null,
				clickFlag:true,
				clickTit:'确定',
				cityHome:{
					cityIndex:0,
					villageIndex:-1,
					village:'',
					groupId:0,
					groupUserId:0
				},
				wjgyTel:'',
				clickWjgyFlag:true,
			}
		},
		onLoad() {
			this.loadZzNewsList();
			this.getZxsList();
			this.getCpList();
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
		},
		onPullDownRefresh : function(){
			this.loadZzNewsList();
			this.getZxsList();
			this.getCpList();
			uni.stopPullDownRefresh();
		},
		onShow(){
			if(uni.getStorageSync('roleName') == '居民'){
				this.globalCityList = uni.getStorageSync('cityList');
				this.cityList = this.globalCityList.map(item=>{
					return item.city
				});
				if( uni.getStorageSync('setCity') == '' ){
					if(this.globalCityList.length > 1 || (this.globalCityList.length == 1 && this.globalCityList[0].villageList.length > 1)){
						this.singleFlag = false;
						this.selCityName = this.cityList[0];
						this.$refs.selHomePop.open();
						uni.hideTabBar();
					}
				}else{
					let cityHome = uni.getStorageSync('setCity');
					let { cityIndex,villageIndex,village } = cityHome[0].villageList[0];
					this.selCityName = cityHome[0].city;
					this.cityIndex = cityIndex == undefined ? 0 : cityIndex;
					this.villageIndex = villageIndex == undefined ? 0 : villageIndex;
					this.cityHome.village = village;
					this.singleFlag = true;
					if(this.globalCityList.length > 1 || (this.globalCityList.length == 1 && this.globalCityList[0].villageList.length > 1)){
						this.singleFlag = false;
					}
				}
				this.villageList = this.globalCityList[this.cityIndex].villageList;
			}else{
				this.cityIndex = 0;
				this.selCityName = '';
				this.villageIndex = -1;
				this.globalCityList = [];
			}
			if(this.syLoadNum == 1){
				this.loadZzNewsList();
				this.getZxsList();
				this.getCpList();
				this.$store.commit('user/SET_SYLOADNUM',0);
			}
		},
		methods: {
			goNewsList(){
				if(this.hasNewsFlag == 1){
					uni.navigateTo({
						url:'/pages/subIndex/zzNews/newsList'
					})
				}
			},
			loadZzNewsList(){
				let field = { page:1,limit:3 };
				getZzNewsList(field).then(res=>{
					this.hasNewsFlag = 1;
					this.newsList = res.data.datas;
				}).catch(err=>{
					this.hasNewsFlag = 0;
				})
			},
			goSelectCity(index,item){
				this.cityIndex = index;
				this.cityHome.cityIndex = index;
				this.selCityName = item;
				this.villageList = this.globalCityList[this.cityIndex].villageList;
				this.villageIndex = -1;
			},
			selectCurrVillage(index,item){
				this.villageIndex = index;
				this.cityHome.villageIndex = index;
				this.cityHome.village = item.village;
				this.cityHome.groupId = item.groupId;
				this.cityHome.groupUserId = item.groupUserId;
			},
			goDialWjgy(){
				wx.makePhoneCall({
					phoneNumber:this.wjgyTel
				})
			},
			loadWjgyTel(){
				let params = {city:this.selCityName,opt:'xzl'};
				getWjgyTel(params).then(res=>{
					//console.log(res)
					this.clickWjgyFlag = true;
					var tmpRes = res.data.datas;
					if(tmpRes.wjgyTel == '' || tmpRes.wjgyTel == undefined){
						this.wjgyTel = tmpRes.ptZxTel;
					}else{
						this.wjgyTel = tmpRes.wjgyTel;
					}
					this.$refs.wjgyPop.open();
				}).catch(err=>{
					//console.log(err)
					this.clickWjgyFlag = true;
				});
			},
			showWjgyTel(){
				if(this.clickWjgyFlag){
					this.clickWjgyFlag = false;
					this.loadWjgyTel();
				}
			},
			closeWjgy(){
				this.$refs.wjgyPop.close();
			},
			selHome() {
				if(this.singleFlag){
					return;
				}
				this.$refs.selHomePop.open();
				uni.hideTabBar();
			},
			cancelSel(){
				this.clickFlag = true;
				this.clickTit = '确定';
				this.$refs.selHomePop.close();
				setTimeout(()=>{
					uni.showTabBar();
				},300)
			},
			goSelHome(){
				if(this.villageIndex == -1){
					this.util.showToast('请选择社区');
					return;
				}
				if(this.clickFlag){
					uni.showLoading({ title: '设置中...', mask: true });
					this.clickFlag = false;
					this.clickTit = '设置中...';
					let tmpField = { zzCity:this.selCityName };
					let field = { ...this.cityHome,...tmpField };
					upToken(field).then(res=>{
						uni.showToast({ title: '设置成功'});
						let tmpCityArr = [];
						let tmpObj = {
							city:this.selCityName,
							villageList:[this.cityHome]
						}
						tmpCityArr.push(tmpObj);
						uni.setStorageSync('setCity',tmpCityArr);
						setTimeout(()=>{
							this.cancelSel();
							let tmpRes = res.data.datas;
							if(tmpRes.newTokenFlag){
								uni.setStorageSync('token',tmpRes.token);
								this.loadZzNewsList();
								this.getZxsList();
								this.getCpList();
							}
						},1500)
					}).catch(err=>{
						this.clickTit = '确定';
						this.clickFlag = true;
					})
				}
			},
			getZxsList() {
				let field = {limit:4}
				getZzCenterZxsListIndex(field).then(res => {
					let tmpRes = res.data.datas;
					if(tmpRes.workerList.length > 0){
						this.hasGridWorkerFlag = true;
						this.workerList = tmpRes.workerList;
					}else{
						this.workerList = [];
						this.hasGridWorkerFlag = false;
					}
					if(tmpRes.zxsList.length > 0){
						this.hasZxsFlag = true;
						this.zxsList = tmpRes.zxsList;
					}else{
						this.zxsList = [];
						this.hasZxsFlag = false;
					}
				}).catch(err => {})
			},
			getCpList() {
				let field = {
					page: 1,
					limit: 5
				}
				getZzIndexSliceCpList(field).then(res => {
					console.log(res)
					this.cpList = res.data.datas;
					this.hasCpFlag = true;
				}).catch(err => {
					//console.log(err)
					this.cpList = [];
					this.hasCpFlag = false;
				})
			},
			goCpDet(item) {
				uni.navigateTo({
					url: '/pages/subIndex/cpDet/cpDet?orderId=' + item.orderId
				})
			},
			goMoreCpHd() {
				uni.navigateTo({
					url: '/pages/subIndex/cpList/cpList'
				})
			},
			goZxsArchive(workerId) {
				uni.navigateTo({
					url: '/pages/subZx/zxsDet/zxsDet?workerId=' + workerId
				})
			},
			goGridWorkerDet(id){
				uni.navigateTo({
					url:'/pages/subZx/zxsDet/gridWorkerDet?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.wjgyPop{
		width: 560rpx;
		height:800rpx;
		position: relative;
		.wjgyBg,
		.wjgyCon{
			width: 560rpx;
			height:720rpx;
		}
		.wjgyBg{
			z-index: 1;
		}
		.wjgyCon{
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.telIcon{
			width: 160rpx;
			height: 160rpx;
			line-height: 160rpx;
			border:4rpx solid #FB5555;
			text-align: center;
			color:#FB5555;
			margin:60rpx 0 30rpx;
			border-radius: 50%;
			.icon-jinggao{
				font-size: 80rpx;
			}
		}
		.telNum{
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.tips{
			font-size: 26rpx;
			color: $pss-text-color8;
		}
		.notes{
			width: 460rpx;
			font-size: 28rpx;
			color:#FB5555;
			margin: 40rpx 0 60rpx;
		}
		.dialBtn{
			width: 360rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #FB5555;
			color: #fff;
			font-weight: 600;
			font-size: 32rpx;
			border-radius: 50rpx;
		}
		.icon-guanbi{
			color: #fff;
			font-size: 60rpx;
			left: 50%;
			margin-left: -30rpx;
			bottom: 0;
		}
	}
	.wjgyBtn{
		width: 128rpx;
		height: 128rpx;
		position: fixed;
		right: 30rpx;
		bottom: 50rpx;
	}
	.banner {
		width: 690rpx;
		height: 330rpx;
		margin: 30rpx 30rpx 0;
		.samePar{
			border-radius: 8rpx;
		}
		.selMyCity{
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
			top: 20rpx;
			right: 20rpx;
			border: 2rpx solid #fff;
			border-radius:50rpx;
			background: linear-gradient(90deg, rgba(75, 136, 243, 1) 0%, rgba(132, 134, 248, 1) 100%);
			.iconfont{
				margin-right: 5rpx;
				font-size: 30rpx;
			}
		}
	}
	.selHomePop {
		$comBor:1rpx solid #eee;
		height: 600rpx;
		background: #fff;
		position: relative;
		.selTit {
			text-align: center;
			color: $pss-color-blueDeep;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: $comBor;
		}
		.homeCon{
			height: calc(100% - 171rpx);;
			.homeCityList{
				width: 180rpx;
				border-right: $comBor;
			}
			.homeVillageList{
				flex: 1;
				padding: 0 15rpx;
			}
			.scrollView{
				height: 100%;
			}
			.homeSize{
				height: 80rpx;
				line-height: 80rpx;
			}
			.cityName{
				@extend .homeSize;
				text-align: center;
				font-size: 30rpx;
				color: $pss-text-color0;
				&.active{
					font-weight: 600;
					color:$pss-color-blueDeep;
				}
			}
			.villageName{
				@extend .homeSize;
				border-bottom:$comBor;
				color: $pss-text-color6;
				font-size: 28rpx;
				.icon-shouye{
					font-size: 32rpx;
					margin-right: 10rpx;
				}
				&.active{
					color:$pss-color-blueDeep;
				}
			}
			.noVillage{
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: $pss-text-color8;
			}
		}
		.homeBot {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			position: sticky;
			left: 0;
			bottom: 0;
			font-size: 30rpx;
			box-shadow: 0 -6rpx 6rpx rgba(0,0,0,.05);
			color: $pss-color-blueDeep;
		}
	}
	// 网格员list
	.workerList{
		width: 22%;
		border-radius: 16rpx;
		background: linear-gradient(180deg, #C8E4FF 0%, #D9DBFD 100%);
		padding: 1rpx;
		$size:60rpx; 
		float: left;
		margin-right: 2.8%;
		.innerWorker{
			background: #fff;
			border-radius: inherit;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;
			font-size: 28rpx;
		}
		.workerHead{
			width: $size;
			height: $size;
			border-radius: 50%;
		}
		.workerName{
			margin: 10rpx 0;
			font-weight: 600;
			color: $pss-text-color0;
		}
		.workerSex{
			font-size: 26rpx;
			color: $pss-color-blueDeep;
		}
		&:last-child{
			margin-right: 0;
		}
	}
	.recommend {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		overflow-x: auto;
	}
	.recList {
		width: 296rpx;
		height: 128rpx;
		position: relative;
		flex-shrink: 0;
		margin-right: 20rpx;
		&:first-child {
			margin-left: 30rpx;
		}
		.recTag{
			width: 36rpx;
			height: 44rpx;
			background: url('../../static/images/index/recTxt.png');
			background-size: cover;
			right: 30rpx;
			top:0;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
		}
		.conView {
			z-index: 2;
			align-items: center;
			.head {
				width: 64rpx;
				height: 64rpx;
				background: #e5f2ff;
				border-radius: 50%;
				margin: 0 15rpx;
				.innerHead {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					.samePar {
						border-radius: 50%
					}
				}
			}

			.userName {
				font-size: 28rpx;
				color: $pss-text-color0;
				margin-bottom: 5rpx;
			}

			.zxsLevel {
				color: $pss-color-blueDeep;
				font-size: 24rpx;
			}
		}
	}

	.modTit {
		color: $pss-text-color0;
		font-size: 32rpx;
		margin: 30rpx;
		align-items: center;
		.more {
			font-size: 26rpx;
			height: 100%;
			padding-left: 30rpx;
			color: $pss-text-color8;
		}

		.tit {
			font-weight: 600;
			position: relative;
		}

		.decLine {
			width: 38%;
			height: 10rpx;
			position: absolute;
			left: 0;
			bottom: 0rpx;
			border-radius: 20rpx;
			z-index: -1;
			background: linear-gradient(270deg, #DEEDFF 0%, #0C72ED 100%);
		}
	}
</style>